<template>
  <div
    class="food-item"
    @click="$router.push({ name: 'FoodDetail', query: { fid: f_item.id } })"
  >
    <div class="left-img">
      <slot>
        <img v-lazy="f_item.food_img" @click.stop="showThisImage" />
      </slot>
    </div>
    <ul class="right-text" v-longpress="showActionSheet">
      <li class="food-name">{{ f_item.food_name }}</li>
      <li class="sale-count">月售：{{ f_item.saleCount }}</li>
      <li class="price">价格：{{ f_item.price }}</li>
    </ul>
  </div>
</template>

<script>
import { ImagePreview,Toast } from "vant";
import { useStore } from "vuex";
export default {
  name: "FoodItem",
  components: { ImagePreview,Toast },
  props: {
    f_item: {
      require: true,
      type: Object,
    },
  },
  setup(props, context) {
    const store = useStore();
    //   点击图片预览
    function showThisImage() {
      // ImagePreview([props.f_item.food_img]);
      ImagePreview({
        images: [props.f_item.food_img],
        closeable: true,
      });
    }
    // 长按拉起sheet
    function showActionSheet() {
      console.log(1111);
      store.commit('showActionSheet',{
        list:["打赏一下","点个赞","加入购物车","加入收藏夹"],
        success:function(index){
          if(index==0){
            console.log("打赏一下");
          }else if(index==1){
            console.log("点个赞");
          }else if(index==2){
            console.log('加入购物车');
          }else if(index==3){
            console.log('加入收藏夹')
            Toast.success('加入收藏夹成功')
          }
        }
      })
    }
    return { showActionSheet, showThisImage };
  },
};
</script>

<style lang="scss" scoped>
.food-item {
  display: flex;
  height: 90px;
  border-bottom: 1px solid lightgray;
  box-sizing: border-box;
  padding: 2px 5px;
  .left-img {
    width: 110px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .right-text {
    flex: 1;
    font-size: 12px;
    margin-left: 5px;
    @include flexbox(column, space-between);
    .food-name {
      font-weight: bold;
      font-size: 20px;
    }
    .sale-count {
      color: red;
    }
  }
}
</style>